import QtQuick 1.1
import com.nokia.meego 1.1
import com.nokia.extras 1.1

Page {
    id: summary_P

    property int colW: summary_P.width/4 - 5

    Item {
        id: titleField
        height: 56
        width: parent.width
        anchors.top: parent.top
        anchors.topMargin: 20
        anchors.left: parent.left

        Label {
            id: titleLabel
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            font.capitalization: Font.MixedCase
            font.pixelSize: 36
            height: 40
            width: parent.width - closeButton.width - 40
            text: "Summary: " + trip
            elide: Text.ElideRight
        }

        Image {
            id: closeButton
            anchors.verticalCenter: titleField.verticalCenter
            anchors.right: titleField.right
            anchors.rightMargin: 20
            height: titleLabel.height
            fillMode: Image.PreserveAspectFit

            source: "image://theme/icon-m-common-dialog-close"
            smooth: true

            MouseArea {
                id: closeButtonArea
                anchors.fill: parent
                onClicked:  {
                    appWindow.pageStack.pop();
                }
            }
        }
    }

    Row {
        id: tableTitle
        height: 40
        spacing: 1
        width: parent.width
        anchors {
            top: titleField.bottom
            topMargin: 20
            left: parent.left
            leftMargin: 10
        }
        Label {
            id: name_T
            text: "Account"
            width: colW //parent.width/4 -5// - (exp_T.width + paid_T.width + balance_T.width + 20) 
            //horizontalAlignment: Text.AlignRight
            color: "green"
        }
        Label {
            id: exp_T
            text: "Expense"
            width: colW //parent.width/4 -5// 100
            horizontalAlignment: Text.AlignRight
            color: "purple"
        }
        Label {
            id: paid_T
            text: "Paid"
            width: colW //parent.width/4 -5// 100
            horizontalAlignment: Text.AlignRight
            color: "green"
        }
        Label {
            id: balance_T
            text: "Balance"
            width: colW //parent.width/4 -5// 100
            horizontalAlignment: Text.AlignRight
            color: "purple"
        }
    }

    ListView {
        id: expenseList
        anchors {
            top: tableTitle.bottom
            topMargin: 5
            right: parent.right
            left: parent.left
            bottom: buttons.top
            bottomMargin: 10
        }
        width: parent.width
        height: 50*count

        model: ListModel {id: expenseModel}
        delegate: Row {
            height: 40
            spacing: 1
            width: parent.width
            anchors {
                left: parent.left
                leftMargin: 10
            }
            Label {
                id: name_T
                text: model.name
                width: colW //parent.width/4 -5// parent.width - (exp_T.width + paid_T.width + balance_T.width + 20) 
                color: "green"
                elide: Text.ElideRight
            }
            Label {
                id: exp_T
                text: model.exp
                width: colW //parent.width/4 -5// 100
                horizontalAlignment: Text.AlignRight
                color: "purple"
            }
            Label {
                id: paid_T
                text: model.paid
                width: colW //parent.width/4 -5// 100
                horizontalAlignment: Text.AlignRight
                color: "green"
            }
            Label {
                id: balance_T
                text: model.balance
                width: colW //parent.width/4 -5// 100
                horizontalAlignment: Text.AlignRight
                color: "purple"
            }
        }
        clip: true
    }

    ButtonRow {
        id: buttons
        height:50
        platformStyle: ButtonStyle { }
        anchors {
            horizontalCenter: parent.horizontalCenter
            bottom: parent.bottom
            bottomMargin: 10
        }
        Button {
            id: save_B
            text: "Save"
            onClicked: {
                myData.saveSummary(appWindow.trip)
                banner0.text = "Summary saved in folder ~/MyDocs/Documents"
                banner0.show()
            }
        }
        Button {
            id: close_B
            text: "Close"
            onClicked: appWindow.pageStack.pop()
        }
    }

    Component.onCompleted: {
        var summary = myData.genSummary()
        var expense = summary.split(";")
        for (var i=0; i<expense.length; i++) {
            var vals = expense[i].split(",")
            expenseModel.append({"name":myNames[i],"exp":vals[0],"paid":vals[1],"balance":vals[2]})
        }
    }

}
